// config
import { Text, View, Image, Navigator, Button } from '@tarojs/components';
import './Order.scss';
// input
import { AtInput, AtForm, AtInputNumber, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui';
import { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import http from '../../../utils/http';


const Order = () => {
    // 一上来加载数据
    useEffect(() => {
        http({
            url: '/user/confirmGroupSubmission',
            method: 'post',
            header: {
                'token': Taro.getStorageSync('token')
            },
            data: {

            },
        }).then((res) => {
            console.log(res);
        })
    }, [])
    // 确认拼团
    const [isGroup, setGroup] = useState('成功')
    const sureGroup = () => {
        if (isGroup == '成功') {
            Taro.navigateTo({
                url: '../Succeed/Succeed',
                success: function (res) {
                    // 通过eventChannel向被打开页面传送数据
                    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
                }
            })
        } else if (isGroup == '已满') {
            Taro.showToast({
                title: '拼团已满',
                icon: 'none',
                duration: 2000
            })
        } else if (isGroup == '超时') {
            Taro.showToast({
                title: '拼团已超时',
                icon: 'none',
                duration: 2000
            })
        } else if (isGroup == '商家停止') {
            Taro.showToast({
                title: '商家已停止拼团',
                icon: 'none',
                duration: 2000
            })
        }
    }

    // 购物车加减
    const [isShopping, setShopping] = useState(1)
    const handleChange = (v) => {
        console.log(v);
        setShopping(v)

    }

    // 地图
    const [isMap, setMap] = useState('')
    const map = (e) => {
        Taro.chooseLocation({
            //获取当前位置
            type: "gcj02", //返回可以用于 Taro.openLocation的经纬度
            success: function (res) {
                const latitude = res.latitude;
                const longitude = res.longitude;
                console.log(res.address);
                setMap(res.address)
                // Taro.openLocation({
                //     //打开地图
                //     latitude,
                //     longitude,
                //     scale: 18,
                //     success: () => {
                //         Taro.chooseLocation({
                //             //确定选址
                //             success(res) {
                //                 setLocval(res.name);
                //             }
                //         });
                //     }
                // });
            }
        });
    }

    return <View>
        <View className='com_one'>
            <View className='group_name'>
                <Text>社区名称</Text>
            </View>
            <View className='com_msg'>
                <Text>提货点：鲜丰水果</Text> | <Text>电话号码：088-6666666</Text> <Text className='at-icon at-icon-phone'></Text>
            </View>
        </View>

        <View className='order_site'>
            <View>
                <Text>提货地址：{isMap}</Text>
                <Text className='at-icon at-icon-map-pin' onClick={map}></Text>
            </View>
            <View>提货时间：下单2小时后，请耐心等待商家备货</View>
        </View>

        <View className='order_msg'>
            <View className='order_p'>提货人预留信息</View>
            <View >
                <AtInput
                    className='AtInput'
                    name='value'
                    type='text'
                    placeholder='预留姓名'
                />
                <AtInput
                    className='AtInput_t'
                    name='value'
                    type='text'
                    placeholder='预留手机号码'
                />
            </View>
        </View>


        <View className='group_msg'>
            <View>拼团信息</View>
            <View className='at-row text_msg' >
                <Image src='../../../static/images/wode.png' className='at-col at-col-3'></Image>
                <View className='at-col at-col-9'>
                    <View className='order_name'>精品泰国桂圆 1000g/盒</View>
                    <View className='money'>
                        <Text>￥7.8 </Text>
                        <Text>￥14.6</Text>
                        <AtInputNumber
                            className='AtInputNumber'
                            min={0}
                            max={10}
                            step={1}
                            value={isShopping}
                            onChange={handleChange.bind(this)}
                        />
                    </View>
                </View>
            </View>
        </View>

        <View className='at-row order_footer'>
            <View className='at-col at-col-8'>到店付款：￥{isShopping * 7.80}</View>
            <View className='at-col at-col-4' value={isGroup} onClick={sureGroup}>确认拼团</View>
        </View>



    </View>


}
export default Order;